import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { ProgressModal } from '../../../../components/common/ProgressModal';
import OrderDetailsService from '../_common/service';
import StorageHelper from '../../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../../config/storage';
const scale = GLOBAL.SCALE;

// 订单创建时间 createDateStr String 是   
// 订单提交时间 rptSubmitDateStr String 是   
// 订单关闭时间 closeDateStr String 是   
// 最后审批时间 lastAuditDateStr String 是   
// 商务完善时间 bizCompleteDateStr String 是   

// 订单当前节点 orderStepFlag String 是 1 创建， 2 审批 3 商务完善，4进行中，5 完成，6废弃

export class SetpCpt extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lightBoxData: {
                modalVisible: false,
                onClosePress: this._closeLightBox,
                title: '',
                rowDataList: [],
            }
        }
    }



    _getUserInfo = async () => {
        //获取用户信息
        let userInfo = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
        if (userInfo) {
            this.userInfo = JSON.parse(userInfo);
        }
        return this.userInfo.corpId
    }

    //获取审批进度
    _getApproveProcess = async () => {
        let { data, choice } = this.props || {};
        let { orderId, cancelProcessInstanceId, processInstanceId } = data || {};
        let { corpId } = choice || {};
        this.setState({ status: 'loading' })

        if (!corpId) {
            corpId = await this._getUserInfo();
        }

        //查询审批节点
        let responseData1 = await OrderDetailsService.approval(orderId, cancelProcessInstanceId || processInstanceId, corpId);

        responseData1 = responseData1 && responseData1.map((item) => {
            if (item.auditResult == 9) {
                item.auditResultName = '操作';
            }
            return item;
        })

        console.log('responseData2', responseData1);

        let { lightBoxData } = this.state;
        lightBoxData.modalVisible = true;
        lightBoxData.title = '审批状态';
        lightBoxData.rowDataList = responseData1;
        this.setState({
            lightBoxData,
            status: 'data'
        })
    }

    _closeLightBox = () => {
        let { lightBoxData } = this.state;
        lightBoxData.modalVisible = false;
        this.setState({ lightBoxData });
    }


    render () {
        let { orderStepFlag, createDateStr, bizCompleteDateStr, closeDateStr, lastAuditDateStr } = this.props.data || {};
        let step = orderStepFlag && parseInt(orderStepFlag) || 0;
        let { lightBoxData } = this.state || {};
        return (
            <View style={[styles.stepBox]}>
                <View style={[styles.stepUpBox, styles.row]}>
                    <Text style={[styles.stepUpItem, styles.stepUpText]}>{createDateStr}</Text>
                    <Text style={[styles.stepUpItem, styles.stepUpText]}>{lastAuditDateStr}</Text>
                    <Text style={[styles.stepUpItem, styles.stepUpText]}>{bizCompleteDateStr}</Text>
                    <Text style={[styles.stepUpItem, styles.stepUpText]}></Text>
                    <Text style={[styles.stepUpItem, styles.stepUpText]}>{closeDateStr}</Text>
                </View>
                <View style={[styles.row, styles.midden]}>
                    <View style={styles.stepXItem}>
                        {/* <View style={[styles.stepXianLeft, styles.stepXianLeftActive]}></View> */}
                        <View style={[styles.stepXianRight, step > 1 ? styles.stepXianRightActive : null]}></View>
                        <View style={[styles.stepYuan, step >= 1 ? styles.stepYuanActive : null]}></View>
                    </View>
                    <View style={styles.stepXItem}>
                        <View style={[styles.stepXianLeft, step >= 2 ? styles.stepXianLeftActive : null]}></View>
                        <View style={[styles.stepXianRight, step >= 3 ? styles.stepXianRightActive : null]}></View>
                        <View style={[styles.stepYuan, step >= 2 ? styles.stepXianRightActive : null]}></View>
                    </View>
                    <View style={styles.stepXItem}>
                        <View style={[styles.stepXianLeft, step >= 3 ? styles.stepXianLeftActive : null]}></View>
                        <View style={[styles.stepXianRight, step >= 4 ? styles.stepXianRightActive : null]}></View>
                        <View style={[styles.stepYuan, step >= 3 ? styles.stepYuanActive : null]}></View>
                    </View>
                    <View style={styles.stepXItem}>
                        <View style={[styles.stepXianLeft, step >= 4 ? styles.stepXianLeftActive : null]}></View>
                        <View style={[styles.stepXianRight, step >= 5 ? styles.stepXianRightActive : null]}></View>
                        <View style={[styles.stepYuan, step >= 4 ? styles.stepYuanActive : null]}></View>
                    </View>
                    <View style={styles.stepXItem}>
                        <View style={[styles.stepXianLeft, step >= 5 ? styles.stepXianLeftActive : null]}></View>
                        {/* <View style={[styles.stepXianRight]}></View> */}
                        <View style={[styles.stepYuan, step >= 5 ? styles.stepYuanActive : null]}></View>
                    </View>
                </View>
                <View style={[styles.stepDownBox, styles.row]}>
                    <View style={styles.stepDownItem}>
                        <Text style={[styles.stepDownText, step >= 1 ? styles.stepDownTextActive : null,]}>创建</Text>
                    </View>
                    <View style={styles.stepDownItem}>
                        <Text onPress={() => { step >= 2 && this._getApproveProcess() }} style={[styles.stepDownText, step >= 2 ? styles.stepDownTextActive : null, step >= 2 ? styles.stepDownTextActive2 : null]}>审批</Text>
                    </View>
                    <View style={styles.stepDownItem}>
                        <Text style={[styles.stepDownText, step >= 3 ? styles.stepDownTextActive : null,]}>商务完善</Text>
                    </View>
                    <View style={styles.stepDownItem}>
                        <Text style={[styles.stepDownText, step >= 4 ? styles.stepDownTextActive : null,]}>进行中</Text>
                    </View>
                    <View style={styles.stepDownItem}>
                        <Text style={[styles.stepDownText, step >= 5 ? styles.stepDownTextActive : null,]}>{orderStepFlag == '6' ? '废弃' : '完成'}</Text>
                    </View>
                </View>

                {/* 审批流 */}
                <ProgressModal {...lightBoxData} />


            </View>
        )
    }
}

const styles = StyleSheet.create({
    stepBox: {
        paddingTop: 10 * scale,
    },
    row: {
        flexDirection: 'row'
    },
    stepUpBox: {

    },
    stepUpText: {
        fontSize: 13 * scale,
        color: style.color.font1,
        opacity: .7,
        textAlign: 'center'
    },
    stepUpItem: {
        flex: 1,
    },
    stepDownItem: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    stepDownText: {
        color: style.color.font1,
        fontSize: 13 * scale,
        textAlign: 'center',
    },
    stepDownTextActive: {
        color: style.color.themeColor,
    },
    stepDownTextActive2: {
        borderWidth: 2 / PixelRatio.get(),
        borderStyle: 'solid',
        borderColor: style.color.themeColor,
        paddingBottom: 3 * scale,
        paddingTop: 3 * scale,
        paddingLeft: 3 * scale,
        paddingRight: 3 * scale,
        borderRadius: 8 * scale
    },
    stepXItem: {
        position: 'relative',
        flex: 1,
        //flexDirection:'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    stepYuan: {
        width: 9 * scale,
        height: 9 * scale,
        backgroundColor: '#D8D8D8',
        borderRadius: 4 * scale
    },
    stepYuanActive: {
        backgroundColor: style.color.themeColor,
    },
    midden: {
        marginTop: 5 * scale,
        marginBottom: 8 * scale
    },
    stepXianLeft: {
        width: '51%',
        height: 2 * scale,
        backgroundColor: '#D8D8D8',
        position: 'absolute',
        left: 0,
    },
    stepXianLeftActive: {
        backgroundColor: style.color.themeColor,
    },
    stepXianRight: {
        width: '51%',
        height: 2 * scale,
        backgroundColor: '#D8D8D8',
        position: 'absolute',
        left: '50%',
        zIndex: 0
    },
    stepXianRightActive: {
        backgroundColor: style.color.themeColor,
    }
})